<template>
  <div class="Footer">
    <div class="footer-inner">
      <div class="footer-top-wrap">
        <div class="footer-title">
          <div class="title-icon"></div>
          <div class="title-divider"></div>
          <div class="title-text">以激情塑造无边未来</div>
        </div>
        <div class="qq-connect">
          <img class="qq-qrcode" alt="清苑负责人微信" :src="wx">
        </div>
      </div>
      <div class="footer-info">
        <p>
          {{ contact }}
        </p>
        <div class="info-divider"></div>
        <p>
          Copyright © {{ copyright }} {{ name }} 保留版权所有
        </p>
        <p>
          <img alt="备案" src="@/assets/img/beian.png"
               style="height: 18px;width: auto; margin-right: 5px;vertical-align: middle;" />
          <a href="" rel="noreferrer" target="_blank">苏公网安备 32011302321449号</a>
          |
          <a href="" rel="noreferrer" target="_blank">苏公网安备 32011302321076号</a>
          |
          <a href="" rel="noreferrer" target="_blank">苏ICP备2020064604号</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const wx = 'https://statice.s3.cn-north-1.jdcloud-oss.com/img/rwm.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750914937&Signature=qYBbp7eu4M6bofmOQj5P%2FJVa13o%3D'
const contact = '联系我们：qingyou@njupt.edu.cn  欢迎前往科技园2楼K219，与我们线下交流。'
const copyright = '2024'
const name = 'Qingyuan Studio.'
</script>

<style scoped>
.Footer {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 64px;
  background: #f5f5f7;
  padding-top: 46px;
  .footer-inner {
    max-width: 1200px;
    width: 85%;
    margin-left: 50%;
    transform: translateX(-50%);
    .footer-top-wrap {
      display: flex;
      align-items: center;
      .footer-title {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        .title-icon {
          width: 124px;
          height: 42px;
          background-image: url("");
          background-position: center;
          background-size: 100%, 100%;
          background-repeat: no-repeat;
        }
        .title-divider {
          background-color: #000000;
          width: 2px;
          height: 25px;
          margin: 0px 35px;
        }
        .title-text {
          font-weight: 400;
          font-size: 18px;
          line-height: 25px;
          text-align: center;
          color: #000000;
        }
      }
      .qq-connect {
        width: 98px;
        .qq-qrcode {
          width: 98px;
          height: auto;
          margin-bottom: 11px;
        }
      }
    }
    .footer-info {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: space-between;
      align-items: center;
      margin-top: 37px;
      p {
        font-weight: 300;
        font-size: 14px;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.8);
        margin: 0px;
        vertical-align: middle;
        img {
          height: 18px;
          width: auto;
        }
      }
      .info-divider {
        width: 100%;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.8);
        margin: 9px 0px;
      }
      a {
        color: rgba(0, 0, 0, 0.8);
        display: inline-block;
      }
    }
  }
}

@media (max-width: 600px) {
  .Footer {
    .footer-inner {
      .footer-top-wrap {
        .footer-title {
          .title-divider {
            display: none;
          }
          .title-text {
            display: none;
          }
        }
      }
      .footer-info {
        p {
          font-size: 12px;
          line-height: 17px;
        }
      }
    }
  }
}
</style>
